<template>
  <el-select v-model="val" :placeholder="placeholder" @change="onchange" ref="vselect">
    <template slot = "prefix" class="input">
      <span class = 'prefixSlot' v-html="nlabel"></span>
    </template>
    <el-option
      v-for="item in option"
      :key="item.value"
      :label="item.label"
      :value="item.value">
       <span v-html="renderer(item)"></span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'vselect',
  data() {
    return {
      nlabel: '',
      val: this.value,
      option: this.options
    }
  },
  model: {
    prop: 'value',
    event: 'handlerValueChange'
  },
  props: {
    placeholder: '请选择',
    renderer: {
      type: Function,
      default: (item) => {
        let label = item.label;
        return `<span>${label}</span>`
      }
    },
    value: {
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default: [{
        label: '全部',
        value: -1
      }]
    }
  },
  watch: {
    value: {
      handler(newval, oldval) {
        this.val = newval;
        this.changeNLabel();
      },
      immediate: true,
      deep: true
    },
    options(o) {
      this.changeNLabel();
    }
  },
  methods: {
    changeNLabel() {
      this.$nextTick(function() {
        this.nlabel =  this.renderer(this.$refs.vselect.selected);
        this.$emit('uploadData', this.$refs.vselect.selected);
        this.$emit('handlerValueChange', this.val);
      })

    },
    onchange(item) {
      this.changeNLabel();
    }

  }
}
</script>

<style scoped>
  .el-select-dropdown__item.selected{
    background: rgba(64, 158, 255, 0.2);
  }
 .el-select /deep/ .el-input .el-input__prefix{
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px;
    padding-left: 15px;
    text-align: left;
   -webkit-appearance: none;
   background-color: #FFF;
   background-image: none;
   border-radius: 4px;
   border: 1px solid #DCDFE6;
   -webkit-box-sizing: border-box;
   color: #606266;
   display: inline-block;
   font-size: inherit;
   height: 40px;
   line-height: 38px;
   outline: 0;
   -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .el-select /deep/ .el-input .el-input__prefix{
    height: 32px;
    line-height: 30px;
  }
  .el-select /deep/ .el-input .el-input__prefix .prefixSlot{
    text-align: left;
  }
  .el-select /deep/ .el-input .el-input__inner{
    visibility: hidden;
  }
</style>
